<template>
  <div>
    <Form ref="form" :rules="formValidate" :label-width="90" :model="form">
          <FormItem label="工单类型 1 " prop="type">
            <Input type="number" v-model.number="form.type" />
          </FormItem>
          <FormItem label="no" prop="no">
            <Input v-model="form.no" />
          </FormItem>
          <FormItem label="工单名称" prop="title">
            <Input v-model="form.title" />
          </FormItem>
          <FormItem label="工单提交者" prop="fromUid">
            <Input type="number" v-model.number="form.fromUid" />
          </FormItem>
          <FormItem label="from_openid" prop="fromOpenid">
            <Input v-model="form.fromOpenid" />
          </FormItem>
          <FormItem label="to_uid" prop="toUid">
            <Input type="number" v-model.number="form.toUid" />
          </FormItem>
          <FormItem label="to_openid" prop="toOpenid">
            <Input v-model="form.toOpenid" />
          </FormItem>
          <FormItem label="部门id" prop="departmentId">
            <Input type="number" v-model.number="form.departmentId" />
          </FormItem>
          <FormItem label="联系人电话" prop="mobile">
            <Input v-model="form.mobile" />
          </FormItem>
          <FormItem label="问题描述" prop="problemDetails">
            <Input v-model="form.problemDetails" />
          </FormItem>
          <FormItem label="图片" prop="pics">
            <Input v-model="form.pics" />
          </FormItem>
          <FormItem label="工单状态 0 初始 1 已接受  2 已完成" prop="statue">
            <Input type="number" v-model.number="form.statue" />
          </FormItem>
    </Form>
    <Row class="code-row-bg" justify="end" type="flex">
      <Button @click="cancel" style="margin-right:10px">取消</Button>
      <Button @click="save" type="primary">保存</Button>
    </Row>
  </div>
</template>
<script>
  import { ordersApi } from '@/api/work-orders';
  export default {
    name: 'OrdersListForm',
    components: {
    },
    props: {
      //是否为更新表单
      isUpdate: {
        type: Boolean,
        default: true
      },
      //更新的表单数据对象
      updateData: {
        type: Object
      }
    },
    data() {
      return {
        //表单数据
        form: {
         //工单类型 1 
         type:null,
         //no
         no:null,
         //工单名称
         title:null,
         //工单提交者
         fromUid:null,
         //from_openid
         fromOpenid:null,
         //to_uid
         toUid:null,
         //to_openid
         toOpenid:null,
         //部门id
         departmentId:null,
         //联系人电话
         mobile:null,
         //问题描述
         problemDetails:null,
         //图片
         pics:null,
         //工单状态 0 初始 1 已接受  2 已完成
         statue:null,
        },
        //表单验证
        formValidate: {
        //工单类型 1 
        type:[{ type:'number',required: true, message: '请输入工单类型 1 ', trigger: 'blur' }],
        //no
        no:[{ required: true, message: '请输入no', trigger: 'blur' }],
        //工单名称
        title:[{ required: true, message: '请输入工单名称', trigger: 'blur' }],
        //工单提交者
        fromUid:[{ type:'number',required: true, message: '请输入工单提交者', trigger: 'blur' }],
        //from_openid
        fromOpenid:[{ required: true, message: '请输入from_openid', trigger: 'blur' }],
        //to_uid
        toUid:[{ type:'number',required: true, message: '请输入to_uid', trigger: 'blur' }],
        //to_openid
        toOpenid:[{ required: true, message: '请输入to_openid', trigger: 'blur' }],
        //部门id
        departmentId:[{ type:'number',required: true, message: '请输入部门id', trigger: 'blur' }],
        //联系人电话
        mobile:[{ required: true, message: '请输入联系人电话', trigger: 'blur' }],
        //问题描述
        problemDetails:[{ required: true, message: '请输入问题描述', trigger: 'blur' }],
        //图片
        pics:[{ required: true, message: '请输入图片', trigger: 'blur' }],
        //工单状态 0 初始 1 已接受  2 已完成
        statue:[{ type:'number',required: true, message: '请输入工单状态 0 初始 1 已接受  2 已完成', trigger: 'blur' }],
        }
      };
    },
  watch: {
      updateData: function(newValue, oldValue) {
          this.$refs['form'].resetFields();
          if (this.isUpdate) {
              for (let k in this.form) {
                  this.$set(this.form, k, newValue[k]);
              }
              this.$set(this.form, 'id', newValue['id']);
          }
      },
      isUpdate: function(newValue, oldValue) {
          if (!newValue) {
              this.resetForm();
              this.$refs['form'].resetFields();
          }
      }
  },
    created() {},
    mounted() {},
    methods: {
      cancel() {
        this.$emit('on-form-close');
      },
      save() {
       this.$refs['form'].validate(valid => {
         if (valid) {
           if (this.isUpdate) {
            this.update();
           } else {
             this.add();
           }
         } else {
          this.$Message.error('参数验证错误，请仔细填写表单数据!');
         }
       });
      },
    resetForm() {
        this.form = {
          //id
          id:null,
          //工单类型 1 
          type:null,
          //no
          no:null,
          //工单名称
          title:null,
          //工单提交者
          fromUid:null,
          //from_openid
          fromOpenid:null,
          //to_uid
          toUid:null,
          //to_openid
          toOpenid:null,
          //部门id
          departmentId:null,
          //联系人电话
          mobile:null,
          //问题描述
          problemDetails:null,
          //图片
          pics:null,
          //工单状态 0 初始 1 已接受  2 已完成
          statue:null,
        };
        this.$refs['form'].resetFields();
      },
      async add() {
        this.$Spin.show();
        let res = await ordersApi.addOrders(this.form);
        this.$Message.success(res.msg);
        this.$Spin.hide();
        this.resetForm();
        this.$emit('on-form-close');
      },
      async update() {
        this.$Spin.show();
        let res = await ordersApi.updateOrders(this.form);
        this.$Message.success(res.msg);
        this.$Spin.hide();
        this.resetForm();
        this.$emit('on-form-close');
      }
    }
  };
</script>